<template>
	<el-card class="form-container" shadow="never">
		<el-form :model="cutPriceInfo" ref="cutPriceForm" label-width="150px" size="small" :rules="rules">
			<el-form-item label="商品名称" prop="productName">
				<div @click="dialogVisible = true" class="input-width" style="border: 1px solid #dcdfe6; height: 32px; padding: 0 15px; border-radius: 4px">{{cutPriceInfo.productName}}</div>
			</el-form-item>
			<el-form-item label="总金额" prop="countPrice">
				<el-input v-model="cutPriceInfo.countPrice" class="input-width" type="number"></el-input>
			</el-form-item>
			<el-form-item label="每次砍价金额" prop="randomPrice">
				<el-input v-model="cutPriceInfo.randomPrice" class="input-width" type="number"></el-input>
			</el-form-item>
			<el-form-item label="开始时间" prop="startDate">
				<el-date-picker class="input-width" v-model="cutPriceInfo.startDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="结束时间" prop="endDate">
				<el-date-picker class="input-width" v-model="cutPriceInfo.endDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="请选择时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="">
				<el-button type="primary" @click="execSave()">保存</el-button>
			</el-form-item>
		</el-form>
		<el-dialog :visible.sync="dialogVisible" width="60%">
			<div class="search">
				<el-form :inline="true" :model="listQuery" size="small" label-width="140px">
					<el-form-item label="输入搜索：">
						<el-input style="width: 203px" v-model="listQuery.name" placeholder="商品名称"></el-input>
					</el-form-item>
					<el-form-item label="">
						<el-button style="float: right" @click="handleSearchList()" type="primary" size="small">查询结果</el-button>
						<el-button style="float: right;margin-right: 15px" @click="handleResetSearch()" size="small"> 重置 </el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="table-container">
				<el-table ref="productTable" :data="productList" style="width: 100%" v-loading="listLoading" height="350" border highlight-current-row>
					<el-table-column type="selection" width="60" align="center"></el-table-column>
					<el-table-column label="编号" width="100" align="center">
						<template slot-scope="scope">{{scope.row.id}}</template>
					</el-table-column>
					<el-table-column label="商品名称" align="center">
						<template slot-scope="scope">{{scope.row.name}}</template>
					</el-table-column>
					<el-table-column label="所属分类" align="center">
						<template slot-scope="scope">{{scope.row.productCategoryName}}</template>
					</el-table-column>
					<el-table-column label="品牌" align="center">
						<template slot-scope="scope">{{scope.row.brandName}}</template>
					</el-table-column>
					<el-table-column label="货号" width="120" align="center">
						<template slot-scope="scope">{{scope.row.productSn}}</template>
					</el-table-column>
					<el-table-column label="价格￥" width="120" align="center">
						<template slot-scope="scope">{{scope.row.price}}</template>
					</el-table-column>
					<el-table-column label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button type="primary" size="mini" @click="handleConfirm(scope.$index, scope.row)">选择</el-button>
						</template>
        			</el-table-column>
				</el-table>
			</div>
			<div slot="footer">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes,prev, pager, next,jumper"
					:page-size="listQuery.pageSize" :page-sizes="[5,10,15]" :current-page.sync="listQuery.pageNum" :total="listQuery.total">
				</el-pagination>
			</div>
		</el-dialog>
	</el-card>
</template>

<script>
import { formatDate } from '@/utils/date';
import {addCutPrice} from '@/api/cutprice.js';
import { fetchList } from '@/api/product'
export default {
	data() {
		return {
			cutPriceInfo: {
				productId: null,
				productName: null,
				countPrice: null,
				randomPrice: null,
				startDate: null,
				endDate: null
			},
			rules: {
				productName: [
					{required: true, message: '请选择商品名称'}
				],
				countPrice: [
					{required: true, message: '请输入总金额', trigger: 'blur'}
				],
				randomPrice: [
					{required: true, message: '请输入每次砍价金额', trigger: 'blur'}
				],
				startDate: [
					{required: true, message: '请选择开始时间', trigger: 'blur'}
				],
				endDate: [
					{required: true, message: '请选择结束时间', trigger: 'blur'}
				],
			},
			dialogVisible: false,
			listLoading: false,
			productList: [],
			listQuery: {
				name: null,
				pageNum: 1,
				pageSize: 5,
				total: null
			}
		};
	},
	methods:{
		handleSizeChange(val) {
			this.listQuery.pageNum = 1;
			this.listQuery.pageSize = val;
			this.getList();
		},
		handleCurrentChange(val) {
			this.listQuery.pageNum = val;
			this.getList();
		},
		getProductList() {
			this.listLoading = true;
			fetchList(this.listQuery).then(response => {
			this.listLoading = false;
			this.productList = response.data.list;
			this.listQuery.total = response.data.total;
			});
		},
		handleSearchList() {
			this.listQuery.pageNum = 1;
			this.getProductList();
		},
		handleResetSearch() {
			this.listQuery = {
				name: null,
				pageNum: 1,
				pageSize: 5,
				total: null
			}
		},
		handleConfirm(index, row) {
			this.cutPriceInfo.productId = row.id;
			this.cutPriceInfo.productName = row.name;
			this.dialogVisible = false;
		},
		execSave(){
			this.$refs['cutPriceForm'].validate((valid) => {
				if (valid) {
					this.$confirm('是否提交数据', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
					}).then(() => {
						addCutPrice(this.cutPriceInfo).then(response => {
							this.$message({ type: 'success', message: '保存成功!' });
							this.$router.back();
						})
					});
				} else {
					this.$message({ message: '验证失败', type: 'error', duration:1000 });
					return false;
				}
			});
		}
	},
	created() {
		this.getProductList()
	}
};
</script>

<style scoped>
	.dialog-footer {
		margin-top: 20px !important;
		text-align: center;
	}
</style>
